<template>
  <div id="operation" @click="idC">
    <div class="main">
      <promptMsg />
      <div class="addMain">
        <div>
          <span class="topic">升级分类：</span>
          <div class="sanLian" style="display: inline-block" @click.stop="sanLianC">
            {{ sanLian.length === 0 ? "顶级分类" : value }}
            <span style="float: right">
              <svg-icon iconClass="xiangxia" className="svg-icon"></svg-icon>
            </span>
            <div class="typeList" v-show="sanFlag">
              <p v-for="item in options" :key="item.value" @click.stop="listC(item)">
                {{ item.grade }} | {{ item.label }}
              </p>
            </div>
          </div>
          <span style="margin-left: 20px">不选择分类默认为顶级分类！</span>
        </div>
        <div>
          <span class="topic"><span style="color: red">*</span> 分类名称：</span>
          <el-input
            v-model="typeName"
            v-on="{ input: inpTest, blur: inpTest }"
          ></el-input>
          <span v-show="is_null" style="margin-left: 20px; color: red"
            >该项不能为空，请填写分类名称！！！</span
          >
        </div>
        <!-- <el-alert v-show="is_null" title="错误提示的文案" type="error" effect="dark"> </el-alert> -->
        <div>
          <span class="topic">排序：</span>
          <el-input-number
            v-model="typeSort"
            @change="handleChange"
            :min="1"
            :max="7"
            label="描述文字"
            style="width:300px"
          ></el-input-number>
        </div>
        <div>
          <span class="topic">显示：</span>
          <el-switch v-model="switchVal" active-color="#13ce66" inactive-color="#ff4949">
          </el-switch>
        </div>
        <div>
          <span class="topic">商品描述：</span>
          <el-input v-model="shopTitle" placeholder="请输入内容"></el-input>
        </div>
        <div style="display: flex">
          <span class="topic">分类图标：</span>
          <div>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
            <el-upload action="#" list-type="picture-card" :auto-upload="false">
              <i slot="default" class="el-icon-plus"></i>
              <!-- <div slot="file" slot-scope="{ file }">
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
              </div> -->
            </el-upload>
          </div>
        </div>
        <div>
          <span class="topic">关键词：</span>
          <el-input v-model="keyWord" placeholder="请输入内容"></el-input>
          <span style="margin-left: 20px">以逗号隔开，最多5个！</span>
        </div>
        <div style="display: flex">
          <span class="topic">分类描述：</span>
          <div style="width: 600px">
            <el-input
              type="textarea"
              :rows="8"
              maxlength="100"
              show-word-limit
              placeholder="请输入内容"
              v-model="textarea"
              width="500px"
            >
            </el-input>
          </div>
        </div>
      </div>
    </div>
    <div class="btn">
      <el-button @click="submitC">提交</el-button>
      <!-- <FormData/> -->
    </div>
  </div>
</template>

<script>
// import { postTest } from "../../api/user";
// import FormData from "@/components/formData";
export default {
  data: () => {
    return {
      type_bt: "add",
      dialogImageUrl: "",
      dialogVisible: false,
      promptFlag: true,
      options: [],
      optionsAll: [],
      id: "",
      value: "",
      typeSort: 1,
      sanLian: [],
      typeName: "",
      switchVal: true,
      textarea: "",
      sanFlag: false,
      shopTitle: "",
      keyWord: "",
      typeSketch: "",
      is_null: false, //验证非空
    };
  },
  components: {
    // FormData,
  },
  created() {
    //请求分类数据
    this.optionsAll = this.$store.state.shopOperation.optionsAll;
    this.options = this.$store.state.shopOperation.optionsAll;
    this.type_bt = this.$route.meta.type;
    if (this.$route.meta.type === "edit") {
      console.log("wait!!");
    }

    this.id = this.$route.query.id;
    console.log(this.$route.query.id);
  },
  methods: {
    hintFlag() {
      this.promptFlag = !this.promptFlag;
    },
    sanLianC() {
      if (!this.sanFlag && this.sanLian.length !== 0) {
        this.sanLian = [];
        this.sanFlag = true;
      } else {
        this.sanFlag = true;
      }
    },
    idC() {
      this.sanFlag = false;
      this.options = this.optionsAll;
    },
    listC(item) {
      this.sanFlag = true;
      this.sanLian.push(item.label);
      this.options = item.child;
      if (!item.child) {
        this.sanFlag = false;
        this.options = this.optionsAll;
      }
      this.value = this.sanLian.join("/");
    },
    handleChange(value) {
      console.log(this.typeSort);
      // this.typeSort = value
    },
    async submitC() {
      //先校验非空
      if (this.typeName === "") {
        //如果为空进行提示
        this.is_null = true;
        this.$alert("分类名称是必填项，请填写完整", "警告", {
          confirmButtonText: "确定",
        });
      } else {
        //不为空进行请求
        this.is_null = false;
        let typeArr = [];
        if (this.sanLian.length === 0) {
          typeArr = "顶级分类";
        } else {
          typeArr = this.sanLian;
        }
        let typeName = this.typeName;
        let shopTitle = this.shopTitle;
        let typeImg = "";
        let keyWord = this.keyWord.split("，");
        let typeTitle = this.textarea;
        let is_show = this.switchVal ? 1 : 2;
        let typeSort = this.typeSort; 
        let id = this.id;
        let obj = {
          id,
          typeArr,
          typeName,
          shopTitle,
          typeImg,
          keyWord,
          typeTitle,
          is_show,
          typeSort,
        };
        console.log(obj, "=====");
        //请求
        if (this.type_bt === "add") {
          //添加请求接口
        } else {
          //编辑请求接口
        }
      }
    },
    inpTest() {
      if (this.typeName === "") {
        this.is_null = true;
      } else {
        this.is_null = false;
      }
    },
  },
};
</script>

<style>
#operation {
  width: 100%;
  min-width: 1080px;
  min-height: 80vh;
  background: #fff;
}
#operation > div {
  width: 96%;
  margin: 0 auto;
}
#operation .header {
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  color: #4c4c4c;
}
#operation .main .main_top {
  width: 100%;
}
#operation .main_top {
  display: flex;
  color: #55ca7d;
}
#operation .main_top .left {
  padding: 4px 0;
  width: 10%;
  text-align: center;
  border: 1px solid #55ca7d;
  border-bottom: 2px solid #fff;
}
#operation .main_top .right {
  width: 90%;
  padding: 4px 0;
  border-bottom: 1px solid #55ca7d;
}
#operation .main_top .right p {
  float: right;
  cursor: pointer;
}
#operation .main .prompt {
  margin-top: 10px;
  width: 100%;
  padding: 1%;
  border: 1px dashed #55ca7d;
  background: rgba(240, 253, 245, 100);
}
#operation .prompt h4 {
  font-size: 14px;
  color: #55ca7d;
}
#operation .prompt p {
  color: #757775;
  font-size: 14px;
  margin: 10px 0;
}
#operation .addMain {
  margin-top: 10px;
  line-height: 40px;
}
#operation .el-input {
  width: 300px;
}
#operation .topic {
  display: inline-block;
  width: 90px;
  text-align: right;
}
#operation .addMain > div {
  display: flex;
  align-items: center;
  margin: 10px 0;
  color: #707070;
  font-size: 13px;
  position: relative;
}
#operation .btn {
  margin: 20px auto;
  padding: 20px 0;
}
#operation .btn .el-button {
  width: 94px;
  background: #55ca7d;
  color: #fff;
  margin-left: 90px;
}
#operation .sanLian {
  border: 1px solid #ddd;
  width: 300px;
  height: 40px;
  padding: 0 10px;
  border-radius: 6px;
  position: relative;
  cursor: pointer;
}
#operation .typeList {
  padding: 0 5px;
  position: absolute;
  left: 0;
  top: 45px;
  z-index: 500;
  background: #fff;
  width: 100%;
  height: 200px;
  border: 1px solid #ddd;
  overflow: auto;
}
</style>
